<template>
  <el-menu :default-active="routePath" class="menu-container" mode="horizontal">
    <SubMenu :menu="topMenu" @click="clickMenuItem" />
  </el-menu>
</template>

<script setup lang="ts">
import type { UserMenu } from '@/store'
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import SubMenu from './subMenu.vue'
import { topMenu, legalPathMap } from './config'

defineOptions({
  name: 'LayoutCpnTopMenu'
})

const router = useRouter()
const route = useRoute()

/*
  /patrol/patrolWorkManage/taskManagement

  依次校验是否等于 topMenu path
  /patrol/patrolWorkManage/taskManagement
  /patrol/patrolWorkManage
  /patrol
*/
const routePath = computed<string | undefined>(() => {
  let _path = ''
  const paths = route.path
    .split('/')
    .filter(Boolean)
    .map((v) => {
      _path = _path + '/' + v
      return _path
    })
    .reverse()
  return paths.find((v) => legalPathMap.get(v)) || _path
})

const clickMenuItem = (item: UserMenu) => {
  if (item.link) {
    window.open(item.link)
    return
  }
  if (item.path !== routePath.value) {
    router.push(item.path)
  }
}
</script>

<style lang="scss" scoped>
.menu-container:not(.el-menu--collapse) {
  width: 256px;
}

.el-menu {
  :deep(.el-menu-item),
  :deep(.el-sub-menu .el-sub-menu__title) {
    @include m-menu-theme(true);
    font-size: 18px;
  }
}

// 纵向
.el-menu--vertical {
  height: 100%;
  :deep(.el-menu-item),
  :deep(.el-sub-menu .el-sub-menu__title) {
    border-left: 4px solid transparent;
    &.is-active {
      border-color: #ffffff;
    }
    &:hover {
      border-color: #ffffff;
    }
  }
}

// 横向
.el-menu--horizontal {
  border-bottom-width: 0;
  --el-menu-hover-bg-color: transparent;
  .el-menu-item,
  .el-sub-menu .el-sub-menu__title {
    &.is-active {
      font-weight: bold;
    }
    &:hover {
      font-weight: bold;
    }
  }
}
</style>
